When the button on-page is clicked it always results in the same output, which is 1 or "Wealth will find you". I have been tinkering and tweaking for a long while and have been unable to find a solution. Any tips or suggestions would be appreciated, even just a place to start troubleshooting!
let computerChoice = (Math.floor(Math.random() * 3));
function clickEvent() {
if (computerChoice === 0) {
alert("You will perish soon.");
} else if (computerChoice === 1) {
alert("Wealth will find you.");
} else if (computerChoice === 2) {
alert("Love is in the air.");
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<title>8Ball</title>
</head>
<body>
<h1 class=header>Cower in Fear, the Magic 8 Ball is here</h1>
<div class="container-one">
<img class="hero-image" src="Images/8ball.jpeg" alt="8ball">
</div>
<div class="container-two">
<!--<button id="action">Swirl the 8ball</button>-->
<input id="action" type="button" value="Swirl" onClick="clickEvent();" />
<h3 class="button-text">Hit the swirl button to discover what the future holds!</h3>
</div>
</body>
</html>This should work as expected. I have place the computerChoice variable inside the clickEvent function to make it generate the random numbers as expected.
const
swirl_btn = document.querySelector('#action')
function clickEvent() {
let
computerChoice = (Math.floor(Math.random() * 3));
if (computerChoice === 0) {
alert("You will perish soon.");
} else if (computerChoice === 1) {
alert("Wealth will find you.");
} else if (computerChoice === 2) {
alert("Love is in the air.");
}
}
swirl_btn.addEventListener('click', function() {
clickEvent()
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<title>8Ball</title>
</head>
<body>
<h1 class=header>Cower in Fear, the Magic 8 Ball is here</h1>
<div class="container-one">
<img class="hero-image" src="Images/8ball.jpeg" alt="8ball">
</div>
<div class="container-two">
<!--<button id="action">Swirl the 8ball</button>-->
<input id="action" type="button" value="Swirl" />
<h3 class="button-text">Hit the swirl button to discover what the future holds!</h3>
</div>
</body>
</html>